<template>
	<view class="root">
		<navigator
			url="/pages/main/getAddress?type=chooseAddress"
			class="fd-row bgc-fff br-20 ai-center"
			:style="{ padding: `26rpx 20rpx`, margin: `46rpx 20rpx 0` }"
		>
			<image class="width-66 height-66" src="/static/img/icon-address.png" mode="aspectFit" />
			<view v-if="address" class="ml-30 f1">
				<label class="f1">
					<text class="color-333 fs-32 fw-700">{{ address.truename }}</text>
					<text class="color-999 fs-24 ml-12 f1">{{ address.mobile }}</text>
					<uni-icons type="arrowright" color="#333" />
				</label>
				<text class="mt-18 fs-28 color-333">
					<text class="mr-6">{{ address.address }}</text>
					<text class="ml-6">{{ address.address_name }}</text>
				</text>
			</view>
			<block v-else>
				<text class="color-333 fs-32 f1 ml-18">暂未添加收货地址</text>
				<label class="lh-1">
					<text class="color-666 fs-26">去添加</text>
					<uni-icons type="arrowright" color="#333" />
				</label>
			</block>
		</navigator>

		<view class="bgc-fff br-20" :style="{ margin: `33rpx 20rpx 0` }">
			<view
				v-for="(option, key) in model"
				:key="key"
				class="fd-row"
				:style="{ padding: `26rpx 20rpx` }"
			>
				<text class="fs-30 fw-700 color-333">{{ option.title }}：</text>

				<picker
					v-if="option.type === 'picker'"
					:mode="option.mode"
					:range="option.range"
					:range-key="option.rangeKey"
					@change="changePicker($event, key)"
					class="f1 height-100percent ml-32"
				>
					<label class="height-100percent">
						<input
							class="fs-28 input f1"
							:disabled="true"
							:placeholder="option.placeholder"
							:value="option.value"
							placeholder-class="color-ccc"
						/>
						<uni-icons type="arrowdown" color="#333" />
					</label>
				</picker>

				<label v-else class="height-100percent f1" @click="operation(key)">
					<input
						class="fs-28 input f1 ml-32"
						placeholder-class="color-ccc"
						:type="option.type"
						:maxlength="option.maxlength"
						:placeholder="option.placeholder"
						:value="option.value"
						:disabled="option.disabled"
						@input="inputValue($event, key)"
					/>
					<uni-icons v-if="option.disabled" type="arrowdown" color="#333" />
				</label>
			</view>
		</view>

		<view :style="{ margin: `55rpx 30rpx 0` }">
			<label class="remarks color-333 fw-700 fs-30">备注</label>

			<textarea
				:style="{ padding: `24rpx 30rpx`, height: `200rpx` }"
				class="bgc-fff mt-12 br-20 fs-28 width-auto"
				placeholder="请输入备注内容..."
				placeholder-class="color-ccc"
				v-model="remarks"
			/>
		</view>

		<button
			class="br-20 bgc-2e54fd color-fff fs-34 fw-600 lh-3"
			:style="{ margin: `98rpx 20rpx` }"
			hover-class="tap-hover"
			@click="submit"
		>
			提交
		</button>

		<uni-popup ref="selectRequirements" type="bottom">
			<scroll-view
				scroll-y
				:style="{ height: `36vh`, borderRadius: `30rpx 30rpx 0 0` }"
				class="bgc-fff oh"
			>
				<uni-collapse :accordion="true">
					<uni-collapse-item
						v-for="factory in pageData.chang"
						:key="factory.id"
						:title="factory.name"
						:showAnimation="true"
						:style="{ borderColor: `#eee` }"
					>
						<label
							v-for="(procedure, procedureIndex) in pageData.gongxu[factory.id]"
							:key="procedure.id"
							:style="{ padding: `30rpx` }"
							@click="selectProcedure(factory.id, procedureIndex)"
						>
							<text class="color-1b1b1b fs-32 ml-60">{{ procedure.name }}</text>

							<icon
								v-show="procedure.checked"
								type="success_no_circle"
								color="#1ba0ff"
								class="ml-32"
							/>
						</label>
					</uni-collapse-item>
				</uni-collapse>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { sleep } from "@/static/libs/utils";

	@Component
	export default class PlaceAnOrder extends Vue {
		// component property
		pageData: AnyObject = { chang: [] };
		remarks: string = "";
		public get model(): AnyObject {
			const { pageData } = this;

			return {
				sn: {
					title: "产品料号",
					type: "text",
					placeholder: "请输入产品料号",
					maxlength: 16,
					value: "",
					data: "",
					name: "title",
				},
				number: {
					title: "产品数量",
					type: "text",
					placeholder: "请输入产品数量",
					maxlength: 16,
					value: "",
					data: "",
					name: "number",
				},
				specifications: {
					title: "产品规格",
					type: "text",
					placeholder: "请输入产品规格",
					maxlength: 16,
					value: "",
					data: "",
					name: "spec",
				},
				thickness: {
					title: "实际铜厚",
					type: "picker",
					placeholder: "请选择实际铜厚",
					mode: "selector",
					range: pageData.tonghou,
					rangeKey: "title",
					value: "",
					data: "",
					name: "tonghou",
				},
				requirements: {
					title: "生产要求",
					type: "popup",
					placeholder: "请选择生产要求",
					disabled: true,
					value: "",
					data: "",
					name: "gongxu",
				},
				time: {
					title: "时间要求",
					type: "picker",
					placeholder: "请选择时间要求",
					mode: "selector",
					range: pageData.time,
					rangeKey: "title",
					value: "",
					data: "",
					name: "time",
				},
			};
		}

		public get address(): AnyObject {
			return this.$store.state.selectedAddress || this.pageData.addressInfo;
		}

		onLoad() {
			uni.showLoading({ title: "Loading...", mask: true });
			this.$request.get("/orderBefore").then(({ data }) => {
				data.chang.forEach((factory: AnyObject) => {
					data.gongxu[factory.id] = data.gongxu[factory.id].map((procedure: AnyObject) => ({
						...procedure,
						checked: false,
					}));
				});
				this.pageData = data;
				uni.hideLoading();
			});
		}

		inputValue(e: AnyObject, key: string) {
			const option = this.model[key];
			option.value = option.data = e.detail.value;
		}

		operation(key: string) {
			if (!this.model[key].disabled) return;
			switch (key) {
				case "requirements":
					(<AnyObject>this.$refs.selectRequirements).open();
					break;
				default:
					break;
			}
		}

		selectProcedure(factoryId: number, procedureIndex: number) {
			const {
				model: { requirements },
				pageData: { gongxu },
			} = this;

			const previousFactoryId = +requirements.data.split("-")[0];

			previousFactoryId !== +factoryId &&
				gongxu[previousFactoryId]?.forEach((item: AnyObject) => (item.checked = false));

			gongxu[factoryId][procedureIndex].checked = !gongxu[factoryId][procedureIndex].checked;

			const checkedItems = gongxu[factoryId].filter((item: AnyObject) => item.checked);

			requirements.value = checkedItems.map((item: AnyObject) => item.name).join("、");
			requirements.data =
				factoryId + "-" + checkedItems.map((item: AnyObject) => item.id).toString();
		}

		changePicker({ detail }: AnyObject, key: string) {
			const option = this.model[key];
			switch (option.mode) {
				case "selector":
					option.value = option.data = option.range[detail.value][option.rangeKey];
					break;
				case "multiSelector":
					const result = option.range.map(
						(item: AnyObject, index: number) => item[detail.value[index]]
					);
					option.value = option.data = result
						.map((item: AnyObject) => item[option.rangeKey])
						.join(" - ");
				default:
					break;
			}
			this.$forceUpdate();
		}

		async submit() {
			if (!this.address.address_id) {
				uni.showToast({
					icon: "none",
					title: "请先选择收货地址",
				});
				return;
			}
			const params: AnyObject = {},
				verify = Object.values(this.model).every((item) => {
					params[item.name] = item.data;

					!item.data && uni.showToast({ title: item.placeholder, icon: "none" });

					return Boolean(item.data);
				});
			if (!verify) return;

			uni.showLoading({ title: "Loading..." });
			const { msg: title } = await this.$request.post(
				"/orderHandle",
				Object.assign(params, { address_id: this.address.address_id, desc: this.remarks })
			);

			uni.showToast({ title, duration: 1000, mask: true });
			await sleep(1);
			uni.navigateBack({});
		}
	}
</script>

<style lang="scss" scoped>
	// scss

	::v-deep {
		checkbox {
			transform: scale(0.7);
			.wx-checkbox-input,
			.uni-checkbox-input {
				border: none;
				background-color: transparent;
				border-radius: 50%;
			}

			.wx-checkbox-input.wx-checkbox-input-checked,
			.uni-checkbox-input.uni-checkbox-input-checked {
				background-color: transparent;
				&::before {
					font-size: 30px;
				}
			}
		}
	}

	.remarks {
		&::before {
			content: "";
			width: 20rpx;
			height: 20rpx;
			background-color: #4a7cee;
			border-radius: 50%;
			margin-right: 8rpx;
		}
	}
</style>